<template>
  <div class="counter-warp">
     <view class="top">
      <image  :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902094940315.jpg"></image>
      <text class="title">物业管理系统</text>
     </view>

     <div>
       <view class="zan-tab__bd">
         <text class="enter_title">企业登录</text>
       </view>
     </div>
    <view class="login" v-show="isLogin">
      <view class="father_accounts">
        <input class="accounts" v-model="account" maxlength="11" placeholder="手机号" />
        <image class="acc_icon" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902000528864.jpg"></image>
      </view>
      <view class="father_accounts">
        <image class="icon_hide_show" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902024449900.jpg" v-show="!showEye" @click="hideShow"></image>
        <image class="icon_hide_close" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902054132148.jpg" v-show="showEye" @click="hideShow"></image>
        <input class="accounts" v-if="showEye" maxlength="15" type="password" v-model='password' placeholder="密码"/>
        <input class="accounts" v-else type="text" maxlength="15"  v-model='password' placeholder="密码"/>
        <image class="acc_icon" :mode="scaleToFill" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051901550179853.jpg"></image>
      </view>
      <button :class="canLogin ? 'btnCanLogin' : 'btnlogin'" :disabled="!canLogin" @click="tohome">登录</button>
      <view class="father_bottom">
          <text class="bottom_text left" @click="toLogin">用户登录</text>
          <text class="bottom_text right" @click="toForgetPwd">忘记密码?</text>
      </view>
    </view>
  </div>
</template>

<script>
// Use Vuex
import api from '@/utils/api'

export default {
  data () {
    return {
      isLogin: true,
      showEye: true,
      passwordType: 'text',
      account: '',
      password: '',
      canLogin: false
    }
  },
  watch: {
    showEye (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal) {
        this.passwordType = 'text'
      } else {
        this.passwordType = 'password'
      }
    },
    account (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal !== '' && this.password !== '') {
        this.canLogin = true
      } else {
        this.canLogin = false
      }
    },
    password (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal !== '' && this.account !== '') {
        this.canLogin = true
      } else {
        this.canLogin = false
      }
    }
  },
  methods: {
    tohome () {
      // 方式一
      // wx.switchTab({
      //   url: '/pages/index/main'
      // })
      // 方式二
      const oploginenterprise = api.oploginenterprise(this.account, this.password)
      oploginenterprise.then(d => {
        if (d.code === 200) {
          this.$router.push({ path: '/pages/home/main', isTab: true })
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    hideShow () {
      this.showEye = !this.showEye
    },
    toLogin () {
      // this.$router.go({ path: '/pages/accounts/login/main' })
      wx.reLaunch({
        url: '/pages/accounts/login/main'
      })
    },
    toForgetPwd () {
      this.$router.push({ path: '/pages/accounts/forgetpassword/main' })
    }
  }
}

</script>
<style>
@import './enterpriselogin.css';
</style>
